<template>
	<view class="user-info flex-col" :style=" 'padding-top:' + (navBoxHTwo -0 +titleHeight)  + 'px' ">
		<!-- style="padding-top: ;" -->
		<view class="header-title fs30 fsb" :style="{height:navBoxHTwo+'px',paddingTop:titleHeight + 'px',		
		lineHeight:navBoxHTwo+'px'} ">
			<view class="fs36 fsb text-[#fff]" style="font-weight: 800;">个人中心</view>
		</view>
		<view class="user-top flex-1 mt-[70rpx]">
			<view class="flex" v-if="isLogin">
				<!-- <router-link to="/bundle/pages/user_profile/user_profile"> -->
				<image @click="toPath('/pages/user_set/user_set')" class="icon-avatar" :src="user.avatar" />
				<!-- </router-link> -->
				<view class="m-l-30 flex-1">
					<view class="text-[40rpx] leading-[48rpx] font-bold text-[#fff]" v-if="user.nickname">
						{{user.nickname}}
					</view>
					<view class="flex user-id mt20" @tap.stop="copy(user.id)">
						<view class="id-warp">ID: {{user.id}}</view>
						<view class="copy-btn ml-[20rpx] ">
							<image style="width: 32rpx;height: 32rpx;margin-top: 6rpx;"
								src="../../../static/my/copy2@2x.png"></image>
						</view>
					</view>
				</view>
				<view class="user-seting" @click="toPath('/pages/user_set/user_set')">
					<image src="../../../static/setting.png"></image>
				</view>
			</view>
			<view v-else to="/pages/login/login" @click="toPath('/pages/login/login')">
				<view class="flex white re">
					<image mode="heightFix" style="height: 220rpx;" src="../../../static/my/img_hi@2x.png"></image>
					<!-- <image class="icon-avatar" src="https://offer-1318401590.cos.ap-guangzhou.myqcloud.com/resource/head.png" mode="" /> -->
					<view class="login-btn">
						立即登录
					</view>
				</view>
			</view>
		</view>
		<view class="assets-nav white flex">
			<view class="flex-1" @click="toPath('/packages/pages/user_wallet/user_wallet')">
				<view class="flex-col col-center">
					<view class="number">{{user.user_earnings || 0}}</view>
					<view class="mt-[8rpx] text-[28rpx] leading-[36rpx]">余额</view>
				</view>
			</view>
			<view class="flex-1" @click="toPath('/packages/user/userLevel')">
				<view class="flex-col col-center">
					<view class="number">{{user.integral || 0}}</view>
					<view class="mt-[10rpx] text-[28rpx] leading-[36rpx]">积分</view>
				</view>
			</view>
			<view class="flex-1" @click="toPath('/pages/coupon/my/my')">
				<view class="flex-col col-center">
					<view class="number">{{user.coupon_num || 0}}</view>
					<view class="mt-[10rpx] text-[28rpx] leading-[36rpx]">优惠券</view>
				</view>
			</view>
			<view class="flex-1" @click="toPath('/pages/collection/collection')">
				<view class="flex-col col-center">
					<view class="number">{{user.like_num || 0}}</view>
					<view class="mt-[10rpx] text-[28rpx] leading-[36rpx]">收藏</view>
				</view>
			</view>
		</view>
		<view class="flex-1 mt-[20rpx]" @click="toPath('/packages/user/userLevel')">
			<view class="user-grade re">
				<image class="user-grade-bg" style="width: 100%;" mode="widthFix"
					src="../../../static/my/bg_vip@2x.png"></image>
				<view class=" vip_card flex row-between">
					<view class="flex vip_card_zi">
						<image class="mr-[10rpx]" style="width: 44rpx;height: 44rpx;"
							src="../../../static/my/VIP@2x.png"></image>
						<view class="font-bold" v-if="!isLogin">
							登录查看会员权益
						</view>
						<view v-if="user.level_name">{{user.level_name ? user.level_name + '会员' : ''}}</view>
						<!-- 	<view v-if="isLogin && user.is_vip == 0">您还不是PLUS会员</view>
						<view v-if="isLogin && user.is_vip == 1">会员权益至{{user.vip_time}}</view> -->
					</view>
					<view class="vip_liaojie">了解会员 </view>
				</view>

			</view>
		</view>

	</view>
</template>
<script lang="ts" setup>
	import { useCopy } from '@/hooks/useCopy'
	import { computed, reactive, ref, shallowRef, watch, nextTick } from 'vue'
	const props = defineProps({
		content: {
			type: Object,
			default: () => ({})
		},
		styles: {
			type: Object,
			default: () => ({})
		},
		user: {
			type: Object,
			default: () => ({})
		},
		isLogin: {
			type: Boolean
		}
	})
	const { copy } = useCopy()
	const navigateTo = (url : string) => {
		uni.navigateTo({
			url
		})
	}
	// ------ data ------
	const navTopSty = ref(false) //解决图片铺满整个屏幕时，筛选吸顶，而导航栏透明，看见了背后的内容
	const titleHeight = ref(0)
	const navbarRight = ref(0) //导航栏距离右边的距离
	const navBoxH = ref(0) //胶囊的高度
	const navBoxHTwo = ref(0) //这是实际的导航栏带底部内边距事的高度
	const navPaddingH = ref(0) //自定义导航栏的高度
	const total = ref(5)


	const toPath = (url : any) => {
		if (props.isLogin == false) {
			uni.navigateTo({
				url: '/pages/login/login',
			})
			return true;
		}
		uni.navigateTo({
			url: url,
		})
	}


	// 获取微信右上角胶囊高度
	const getHeight = async () => {
		let res = wx.getMenuButtonBoundingClientRect();
		titleHeight.value = res.top;
		navbarRight.value = res.width; //胶囊的宽度
		navBoxH.value = res.height; //胶囊的高度
		navBoxHTwo.value = res.height + 6;
	}
	getHeight();
</script>



<style lang="scss" scoped>
	@import '@/styles/common.scss';

	.vip_card {
		.vip_liaojie {
			height: 50rpx;
			background: linear-gradient(180deg, #FBE1B5 0%, #F7C789 100%);
			border-radius: 25rpx;
			// padding: 8rpx 16rpx;
			line-height: 50rpx;
			padding: 0 16rpx;
			font-weight: bold;
			font-size: 24rpx;
			color: #6B4217;
		}

		position: absolute;
		// z-index: 21;
		top: 30rpx;
		width: calc(100% - 60rpx);
	}

	.user-grade {
		color: #F6E5C8;
		height: 126rpx;
		background-size: 100%;
		padding: 30rpx 20rpx 0 30rpx;
		margin: 0 30rpx;
		line-height: 1;

		.user-grade-bg {
			position: absolute;
			left: 0rpx;
			top: 0;
		}
	}

	.login-btn {
		width: 256rpx;
		height: 80rpx;
		background-color: #fff;
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #FF4907;
		// margin: 0 auto;\
		position: absolute; 
		left: calc(50% - 128rpx);


	}

	.user-seting {
		// height: 100%;
		margin-top: -50rpx;

		// background-color: red;
		image {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.header-title {
		position: absolute;
		top: 0;
		width: 100vw;
		text-align: center;
	}

	.user-info {
		// background: linear-gradient(360deg, rgba(143, 231, 0, 0) 0%, #F7DA1C 100%);
		background: linear-gradient( 360deg, rgba(255,73,7,0) 0%, #FF4907 100%);
		// filter: blur(48px);
		// @include background_image(90deg, 0%, 100%, '../../../static/bg_user.png');
		background-size: 100% auto;
		background-repeat: no-repeat;
		box-sizing: border-box;
		position: relative;

		.user-top {
			padding: 0 30rpx;
			// #ifdef  H5
			padding-top: 30rpx;

			// #endif
			.icon-avatar {
				width: 110rpx;
				height: 110rpx;
				border-radius: 50%;
				border: 4rpx solid #fff;
			}

			.user-id {
				display: inline-flex;
				// height: 48rpx;
				// line-height: 48rpx;
				background: #FFFFFF;
				border-radius: 28px;
				color: #666666;
				font-size: 24rpx;

				padding: 4rpx 4rpx 4rpx 20rpx;
				// display: inline-flex;
				// border: 1px solid #fff;
				// border-radius: 100rpx;
				// padding-left: 20rpx;

				.copy-btn {
					width: 56rpx;
					height: 40rpx;
					// background: linear-gradient(180deg, #F7DA1C 0%, #F7DA1C 100%);
					background: #FF4907;
					border-radius: 32rpx;
					text-align: center;
					line-height: 40rpx;
				}
			}
		}

		.assets-nav {
			padding: 30rpx 0 20rpx;
			color: #fff;

			.number {
				// font-size: 32rpx;
				font-weight: 500;
				font-size: 36rpx;
				line-height: 44rpx;
			}
		}


	}
</style>